<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./src/css/style.css">
</head>
<body>
    <div class="nav">
        <div class="tempnav">
            <img src="public/icons/back.png" alt=""><a href="#">User pages - Profile</a>
        </div>
        <div class="tempnav secondNav">
            <div class="menu">
            <img src="public/icons/statistic.png" alt="" style="display: block" />
            <a href="#">Statistics</a>
            </div>
            <div class="menu">
            <img src="public/icons/invoices.png" alt="" style="display: block" />
            <a href="#">Invoices</a>
        </div>
        <div class="menu">
            <img src="public/icons/schedule.png" alt="" style="display: block" />
            <a href="#">Schedule</a>
        </div>
        </div>
    </div>
    <nav class="nav">
        <div class="secondNav">
            <img src="public/icons/menu.png" alt=""><a href="/" data-link>Activity</a>
            <img src="public/icons/map.png" alt=""><a href="/map" data-link>Map</a>
            <img src="public/icons/time.png" alt=""><a href="/time" data-link>Time</a>
        </div>
        <div class="secondNav navSec">
        <img src="public/icons/notes.png" alt=""><a href="#" data-link>Notes</a> 
        <img src="public/icons/friends.png" alt=""><a href="#" data-link>Friends</a>
        <img src="public/icons/photos.png" alt=""><a href="#" data-link>Photos</a>
        <img src="public/icons/settings.png" alt="">
        <img src="public/icons/down.png"/>   
    </div>
    </nav>

    <main id="app"></main>
    <timer-comp style="display: none;"></timer-comp>
    <script defer type="module" src="./src/js/main.js"></script>
    <script defer>let t = document.querySelector("timer-comp");
        t.started = new Date();
        t.update = (ms) => (sessionStorage.setItem('timer', t.innerHTML = new Date(ms).toISOString().split(/T|\./)[1]));
        setInterval(() => t.update(new Date() - t.started), 500);
        </script>
        <script  defer type="text/javascript" src="https://maps.googleapis.com/maps/api/js" ></script>
</body>
</html>



 